<template>
	<view class="container">
		<view class="headerNav"><u-navbar title="服务订单" placeholder></u-navbar></view>
		<view class="bigNav">
			<u-dropdown ref="dropdown" @open="open" @close="close">
				<u-dropdown-item @change="handlerChange(0,$event)" v-model="data.type" :title="data.type_text"
					:options="data.options_type"></u-dropdown-item>
				<u-dropdown-item @change="handlerChange(1,$event)" v-model="data.status" :title="data.status_text"
					:options="data.options_status"></u-dropdown-item>
			</u-dropdown>
			<view :style="'height:'+ data.height+''">
				<z-paging :fixed="false" ref="paging" :auto="false" v-model="dataList" @query="getSystemInfoSync"
					created-reload :auto-scroll-to-top-when-reload="false" :auto-clean-list-when-reload="true"
					:show-refresher-when-reload="true">
					<view class="newsList" v-for="item in dataList" :key="item.id" @click="handlerDetail(item.id)">
						<view class="newsList_tp">
							<view>
								服务类型：{{item.service_name}}
							</view>
							<view>
								订单号：{{item.oid}}
							</view>
							<view>
								支付状态：
								<text class="red" v-if="item.status == 0">待付款</text>
								<text class="green" v-if="item.status == 1">已完成</text>
								<text class="grey" v-if="item.status == 2">已取消</text>
							</view>
						</view>

						<view class="newsList_btm ">
							实付金额：<text class="red">￥{{item.amount}}</text>
						</view>
						<view v-if="item.status == 0" class="u-flex u-row-right">
							<view class="self_btn u-m-r-20" @click.stop="handlerCancel(item)">
								取消订单
							</view>
							<view class="self_btn now_pay" @click.stop="handlerRepay(item)">
								立即支付
							</view>
						</view>
						<view v-if="item.status == 1" class="u-flex u-row-right">
							<view class="self_btn ">
								查看详情
							</view>
						</view>
						<view v-if="item.status == 2" class="u-flex u-row-right" @click.stop="handlerDel(item)">
							<view class="self_btn ">
								删除订单
							</view>
						</view>
					</view>
				</z-paging>
			</view>
		</view>

		<u-modal v-model="data.isCancel" title="系统提示" content="确定取消该订单吗" show-cancel-button confirm-text="确定"
			@confirm="$u.throttle(submitCancel,1000)"></u-modal>
		<u-modal v-model="data.isDel" title="系统提示" content="确定删除该订单吗" show-cancel-button confirm-text="确定"
			@confirm="$u.throttle(submitDel,1000)"></u-modal>
		<!-- 收银台 -->
		<u-cashier :modelValue="data.isCashier" :payItem="data.item" @confirm="paySubmit"
			@close="data.isCashier = false"></u-cashier>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		nextTick
	} from 'vue';
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const {
		proxy
	} = getCurrentInstance()
	const data = reactive({
		// 用户身份
		utype: uni.getStorageSync('utype'),
		// 列表高度
		height: null,
		// 类型
		options_type: [],
		type: '',
		type_text: '',
		// 状态
		options_status: [],
		status: '',
		status_text: '',
		// 取消订单弹窗
		isCancel: false,
		// 删除订单弹窗
		isDel: false,
		// 支付弹窗
		isCashier: false,
		// 订单信息
		item: {}
	})

	const paging = ref(null)
	let dataList = ref([])
	// 下拉列表
	const dropdown = ref(null)
	const open = (index) => {
		// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
		// 同时内部会自动给当前展开项进行高亮
		dropdown.value.highlight();
	}
	const close = (index) => {
		// 关闭的时候，给当前项加上高亮
		// 当然，您也可以通过监听dropdown-item的@change事件进行处理
		dropdown.value.highlight(index);
	}
	// 条件筛选
	const handlerChange = (id, value) => {
		if (id == 0) {
			data.type = value
			let res = data.options_type.filter(item => item.value == value)
			data.type_text = res[0].label

		} else {
			data.status = value == -1 ? '' : value
			let res = data.options_status.filter(item => item.value == value)
			data.status_text = res[0].label
		}
		paging.value.reload()
	}
	//获取订单列表
	const getSystemInfoSync = async (pageNo, pageSize) => {
		let params = {
			page: pageNo,
			pagesize: pageSize,
			service_type: data.type,
			status: data.status == -1 ? '' : data.status
		}
		let res
		if (data.utype == 1) {
			res = await uni.$u.api.company_orderlist({
				params
			})
		} else {
			res = await uni.$u.api.orderList({
				params
			})
		}
		if (data.options_status.length == 0) {
			data.options_status = res.filter_status
			data.options_status.unshift({
				value: -1,
				label: '全部状态'
			})
			data.status_text = data.options_status[0].label
			data.status = data.options_status[0].value
		}
		if (data.options_type.length == 0) {
			data.options_type = res.filter_type
			data.options_type.unshift({
				value: '',
				label: '全部类型'
			})
			data.type_text = data.options_type[0].label
			data.type = data.options_type[0].value
		}
		paging.value.complete(res.items)
	}
	// 获取列表展示高度
	const getListHeight = async () => {
		let res = await uni.$u.getRect('.headerNav');
		data.height = (uni.$u.sys().windowHeight - res.height - 45) + 'px'
	}
	// 去详情页面
	const handlerDetail = (id) => {
		uni.$u.route('pages/pagesPersonal/integral/serve/detail', {
			id
		})
	}
	// 删除订单
	const submitDel = async () => {
		let params = {
			id: data.item.id
		}
		if (data.utype == 1) {
			await uni.$u.api.company_order_del(params)
		} else {
			await uni.$u.api.orderDel(params)
		}
		uni.$u.toast('删除成功')
		paging.value.reload()
	}
	const handlerDel = (item) => {
		data.isDel = true
		data.item = item
	}
	// 立即支付
	const paySubmit = async (value) => {
		let params = {
			id: data.item.id,
			payment: value == 1 ? 'wxpay' : 'alipay'
		}
		let orderInfo
		if (data.utype == 1) {
			orderInfo = await uni.$u.api.company_repay(params)
		} else {
			orderInfo = await uni.$u.api.repay(params)
		}
		// #ifndef H5
		// 拉起收银台
		uni.requestPayment({
			provider: params.payment,
			orderInfo: orderInfo.parameter, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
			success(res) {
				uni.$u.toast('支付成功')
				data.isCashier = false
				paging.value.reload()
			},
			fail(err) {
				uni.$u.toast('您已取消支付')
			}
		});
		// #endif
		// #ifdef H5
		uni.$u.toast('暂不支持')
		// #endif
	}
	const handlerRepay = (item) => {
		data.isCashier = true
		data.item = item
	}
	// 取消订单
	const submitCancel = async () => {
		let params = {
			id: data.item.id
		}
		if (data.utype == 1) {
			await uni.$u.api.company_order_cancel(params)
		} else {
			await uni.$u.api.orderCancel(params)
		}
		uni.$u.toast('取消成功')
		paging.value.reload()
	}
	const handlerCancel = (item) => {
		data.isCancel = true
		data.item = item
	}
	onShow(() => {
		nextTick(() => {
			paging.value.reload()
		})
	})
	onReady(() => {
		getListHeight()
	})
</script>
<style>
	page {
		background-color: #F9F9F9;
	}
</style>
<style lang="scss">
	:deep .u-dropdown {
		box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.4) !important;
		background-color: #fff;
	}

	.newsList {
		background-color: #fff;
		padding: 24rpx 48rpx;
		margin-top: 20rpx;
		color: #101010;
		font-size: 32rpx;

		.red {
			color: #FD2828;
		}

		.green {
			color: #090;
		}

		.grey {
			color: #999;
		}

		&_tp {
			border-bottom: 2rpx solid #e6e6e6;

			view {
				margin-bottom: 20rpx;
			}
		}

		&_btm {
			padding-top: 42rpx;
			padding-bottom: 16rpx;
		}

		.self_btn {
			border: 2rpx solid #c7c7c7;
			border-radius: 40rpx;
			color: #929292;
			font-size: 28rpx;
			padding: 10rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.now_pay {
			color: #00D075;
			border: 2rpx solid #00D075;
		}
	}
</style>